<template>
	<view class="payment">
		<view class="bg-color" style="width:100%;height:30rpx"></view>
		<!-- 收货地址 -->
		<view class="address flex-row border-radius" style="background-color: #fff;
		width:100%;height:150rpx">
			<view class="flex-row-ct theme-color margin-lr-com iconfont icon-dingwei1" style="font-size: 25px"></view>
			<view class="flex-column-st">
				<view class="message" type="text">萍乡市安源区萍安北大道112号</view>
				<view class="name" type="text">路易斯 12345678901</view>
			</view>
			<view class="flex-row-ct" style="margin-left: auto;">
				<navigator url="">
					<view class="flex-row-ct theme-color iconfont icon-you" style="font-size: 20px;margin-left: auto;"></view>
				</navigator>
			</view>
		</view>
		<!-- 购买列表 -->
		<!-- test -->
		<shop-cart ref="shopCart" :selectKey="selectKey" :cart-list="products.order_list" :select-cart-list="selectCartList"
		@operateCount="operateCount" @triggerSelect="triggerSelect" @triggerSelectAll="triggerSelectAll" @submit="submit" @cartDelete="cartDelete" @click="onclick"></shop-cart>
		<!-- test -->
		<!-- <view class="margin-tb-com border-radius" style="background-color: #fff;height:fit-content">
			<view class="goods" v-for="(item,index) in products.order_list" :key="index" style=""> -->
				<!-- 是否选中 -->
				<!-- <view class="img flex-row-ct margin-left-com" @tap="onchangeselected()" style="width:5%;height:100px">
					<image v-if="!selected" @click="selected = !selected" src="../../static/image/cart/unselected.png" style=" width: 40rpx;height: 40rpx;"></image>
					<image v-if="selected" @click="selected = !selected" src="../../static/image/cart/selected.png" style=" width: 40rpx;height: 40rpx;"></image>
				</view> -->
				<!-- 商品图片 -->
				<!-- <view class="img " style="width:40%;height:100px">
					<image :src="item.img" mode="aspectFill" @click="onDetails" class="border-radius margin-com "
					style="width:80%;height:80%;"></image>
				</view> -->
				<!-- 内容 -->
				<!-- <view class="goods-content" style="margin-top:30rpx;display: flex;flex-direction:column;
				width:60%;height:100px;font-weight: bold;">
					<view class="flex-row-st">
						<view class="goods-title" style="font-size: 30rpx;width:100%;height:30%">{{item.title}}</view>
						<view class="goods-price theme-color margin-right-com" style="font-size: 40rpx;height:30%">￥{{item.price}}</view>
					</view>
					<view class="goods-color text-mid margin-top-com" style="font-size: 20rpx;width:100%;height:30%;">{{item.color}}；{{item.size}}</view>	
					<view class="quantity margin-right-com" style="margin-left: auto;margin-top: auto">
						<uni-number-box :min="1" :max="10" :value="1" background="#ee3f4d" color="#fff"></uni-number-box>
					</view>
				</view>
			</view>
		</view> -->



		<view class="border-radius " style="background-color: #fff;height:120rpx;width:100%">
			<view class="flex-row-st" style="width:100%;height:100%">
				<view class="margin-left-com" style="font-size: 30rpx;">支付方式</view>
				<view class="margin-right-com iconfont icon-weixin"
				style="margin-left: auto;font-size: 20px;color:#28c445"></view>
				<text class="margin-right-com" style="font-size: 30rpx;">微信支付</text>
			</view>
		</view>
  
		<view class="bg-color" style="width:100%;height:130rpx"></view>
		<!-- 底部导航栏 -->
		<view class="tabbar flex-row-ct padding-left-com"
		style="position: fixed; bottom: 0;left: 0; right: 0;width:100%;height:60px;
		background-color: #fff;">
			<text style="font-size: 30rpx;">共{{numselected}}件，</text>
			<text style="font-weight:bolder;font-size: 35rpx;">合计:</text>
			<view class="account theme-color" style="font-size: 45rpx;font-weight: bold;">￥{{totalPrice}}</view>
			<view class="nav" style="margin-left: auto">
				<button class=" theme-bg-color margin-right-com" type="default" size="mini" style="color:#fff;border-radius: 30rpx;" @click="onDetails">提交订单</button>

			</view>
		</view>
	</view>
</template>

<script setup>

import { ref,reactive,computed } from 'vue';
//是否选中
const selected = ref(false)

//test
const selectCartList = ref([])
const operateCount = ref(1)
const submit = () => {
	console.log(selectCartList.value)
}
const triggerSelect = (index) => {
	selected.value = !selected.value
}
const cartDelete = (index) => {
	selectCartList.value.splice(index, 1)
}

const totalPrice = computed(() => {
	let total = 0
	selectCartList.value.forEach(item => {
		total += item.price * item.number
	})
	return total.toFixed(2)
})
const numselected = computed(() => {
	let num = 0
	selectCartList.value.forEach(item => {
		num += item.number
	})
	return num
})
//test
//
//import { array } from 'prop-types';
//const { proxy } = getCurrentInstance(); //获取上下文实例，proxy=vue2的this
//减少
// const sub=(storeIndex, goodsIndex, goodsnum)=>{
// 				if(goodsnum == 1){
// 					return
// 				}else{
// 					this.datas[storeIndex].goods[goodsIndex].number--
// 				}
// 				this.statistics()
// 			}
//增加
// const add=(storeIndex, goodsIndex, goodsnum)=>{
// 				this.datas[storeIndex].goods[goodsIndex].number++
// 				this.statistics()
// 			}
//
// const statistics=()=>{
// 				let totalPrice = 0
// 				this.datas.forEach((item, index) => {
// 					item.goods.forEach((goods, goodsIndex) => {
// 						totalPrice += goods.number * goods.price
// 					})
// 				})
// 				this.totalPrice = totalPrice
// 			}

//选中商品数量

// const numselected = ref(0)
// const numselected=computed(()=>{
// })

//计算总价
// const totalPrice=computed(()=>{
// 	return products.order_list.reduce((sum,item)=>{
// 		return sum+item.price*item.number
// 	},0)
// })
// 商品列表
const products = reactive({
  order_list: [{
                    _id: '1',
                    count: 1,
                    shopName: '豹纹毛衣',
					color: '咖色',
					size: 'L',
                    shopTagList: [{
                        _id: '1',
                        category: "复古"
                    }],
                    price: 178,
                    shopImage: "../../static/image/shop/cloth.png"
                }, {
                    _id: '2',
                    count: 1,
                    shopName: '小树熊套装',
					color: '黑色',
					size: 'XL',
                    shopTagList: [ {
                        _id: '2',
                        category: "连衣裙"
                    }],
                    price: 39.9,
                    shopImage: "../../static/image/shop/paja.png"
                },
				{
				    _id: '3',
				    count: 1,
				    shopName: '奥特曼马甲',
					color: '灰色',
					size: 'M',
				    shopTagList: [{
				        _id: '3',
				        category: "复古"
				    }],
				    price: 60,
				    shopImage: "../../static/image/shop/ultrama.png"
				}],
})
//跳转商品详情
const onDetails = () => {
  // uni.navigateTo({
  //   url: '/pages/detail/detail'
  // });
  uni.showToast({
  			title: '功能正在开发中...',
  			icon: 'none',
  			duration: 2000
  		});
}
//
const onclick = () => {
  uni.showToast({
  			title: '功能正在开发中...',
  			icon: 'none',
  			duration: 2000
  		});
}
</script>

<style lang="scss" scoped>
.payment{
  background-color: #efefef;
  height: 100vh;
  .goods{
    display: flex;
    flex-direction: row;
    background-color:#fff ;
    .img{
      background-color: #fff;
      image{}
    }
  }
  .goods-content{
    .goods-title{}
    .goods-color{}
    .goods-price{}
  }
	//
	.goodsInfo {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #EDEDED;
	
		&:nth-last-child(1) {
			border: none;
		}
	
		.checked-image {
			width: 36rpx;
			height: 36rpx;
		}
	
		.goodsInfo-right {
			width: 634rpx;
			height: 246rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
	
			.goods-image {
				width: 180rpx;
				height: 180rpx;
			}
	
			.goodsInfo-box {
				width: 428rpx;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
	
				.goods-name {
					width: 428rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #313133;
				}
	
				.spe {
					width: 428rpx;
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #919298;
				}
	
				.goods-box {
					width: 428rpx;
					margin-top: 18rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
	
					.goods-price {
						font-size: 32rpx;
						font-weight: 400;
						color: #313133;
					}
	
					.goods-num-box {
						width: 168rpx;
						height: 46rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
	
						.goods-image {
							width: 46rpx;
							height: 44rpx;
							text-align: center;
							line-height: 44rpx;
							border: 1rpx solid #CFCFCF;
							font-size: 38rpx;
						}
	
						.goods-num {
							width: 76rpx;
							height: 44rpx;
							text-align: center;
							line-height: 44rpx;
							font-size: 33rpx;
							font-weight: 400;
							color: #666666;
							border-top: 1px solid #CFCFCF;
							border-bottom: 1px solid #CFCFCF;
						}
					}
				}
			}
		}
	}
	
	.tabbar {
		box-shadow: $uni-shadow-lg;
	}
}
</style>
